<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>普通用户-漂流瓶</title>
    <link rel="stylesheet" href="./layui2_9/css/layui.css">
    <style>
        .layui-icon-heart-fill{
            color: red;
        }
        .friend-item {
            padding: 15px;
            border-bottom: 1px solid #e0e0e0;
        }
        .friend-item img {
            float: left;
            margin-right: 15px;
            width: 200px;
            height: auto;
        }
        .friend-item .info {
            overflow: hidden;
        }
        .friend-item .actions {
            text-align: right;
        }
        .friend-item .actions i {
            cursor: pointer;
            margin-left: 10px;
        }
        .friend-item .tag {
            display: inline-block;
            background-color: #ff9800;
            color: #fff;
            padding: 5px 10px;
            border-radius: 15px;
            margin-right: 10px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class=" layui-layout-admin">

    <!-- 内容主体区域-->
    <div class="layui-body">
        <div style="padding: 30px;" class="layui-fluid">

            <div class="layui-row">
                <div class="layui-col-md12">
                    <span class="layui-badge-dot"></span> <span class="layui-badge-dot layui-bg-orange"></span>
                    <span class="layui-badge-dot layui-bg-green"></span>
                    <span class="layui-badge-dot layui-bg-cyan"></span>
                    <span class="layui-badge-dot layui-bg-blue"></span>
                    <span class="layui-badge-dot layui-bg-black"></span>
                    <span class="layui-badge-dot layui-bg-gray"></span><br><br>
                    <!--以下是搜索框-->
                    <div class="layui-row">
                        <div class="layui-col-md1">&nbsp;</div>
                        <div class="layui-col-md10">
                            <form class="layui-form layui-form-pane" lay-filter="formFilter" method="post" action="userBottle.html">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <label class="layui-form-label">用户名</label>
                                        <div class="layui-input-block" style="width: 250px;">
                                            <input name="" placeholder="输入" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-input-inline">
                                        <label class="layui-form-label">学校</label>
                                        <div class="layui-input-block" style="width: 150px;">
                                            <input name="" placeholder="输入选择" class="layui-input" id="ID-dropdown-demo-base-input" autocomplete="off">
                                        </div>
                                    </div>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button class="layui-btn" lay-submit="seform" lay-filter="seform">搜索</button>
                                    <button class="layui-btn" lay-submit="seform" lay-filter="seform" style="margin-left: 150px">换一批</button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-col-md1">&nbsp;</div>
                    </div>
                    <!--以上是搜索框-->
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>漂流瓶</legend>
                    </fieldset>
                </div>
            </div>


            <!--用户列表-->
            <div class="layui-row friend-dating-list">
                <div class="layui-col-md9">
                    <ul class="layui-timeline">
                        <li class="layui-timeline-item friend-item">
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-row">
                                    <!-- 左边照片 -->
                                    <div class="layui-col-md4">
                                        <a href="javascript:void(0)" onclick="showUserInfo('小灰','layui2_9/images/user01.jpg')">
                                            <img src="layui2_9/images/user01.jpg" alt="" class="layui-circle" style="width: 150px; height: auto;">
                                        </a>
                                    </div>
                                    <!-- 中间内容 -->
                                    <div class="layui-col-md7 info">
                                        <p><span>小灰</span><span style="float: right">匹配度96%</span></p>
                                        <p><span>24岁 | 金牛座 | 男 | 南昌大学 | 软件工程师</span></p>
                                        <p><span>我是一个具有2年工作经验的Java软件工程师。</span></p>
                                    </div>
                                    <!-- 右边操作按钮 -->
                                    <div class="layui-col-md1 actions">
                                        <i class="layui-icon layui-icon-heart" onclick="follow(this)"></i><br>
                                        <i class="layui-icon layui-icon-error" lay-on="confirm"></i><br>
                                        <i class="layui-icon layui-icon-dialogue" onclick="showPrivate('小灰')"></i><br>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-row friend-dating-list">
                <div class="layui-col-md9">
                    <ul class="layui-timeline">
                        <li class="layui-timeline-item friend-item">
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-row">
                                    <!-- 左边照片 -->
                                    <div class="layui-col-md4">
                                        <a href="javascript:void(0)" onclick="showUserInfo('小蓝','layui2_9/images/user02.png')">
                                            <img src="layui2_9/images/user02.png" alt="" class="layui-circle" style="width: 150px; height: auto;">
                                        </a>
                                    </div>
                                    <!-- 中间内容 -->
                                    <div class="layui-col-md7 info">
                                        <p><span>小蓝</span><span style="float: right">匹配度96%</span></p>
                                        <p><span>24岁 | 金牛座 | 男 | 南昌大学 | 软件工程师</span></p>
                                        <p><span>我是一个具有2年工作经验的Java软件工程师。</span></p>
                                    </div>
                                    <!-- 右边操作按钮 -->
                                    <div class="layui-col-md1 actions">
                                        <i class="layui-icon layui-icon-heart" onclick="follow(this)"></i><br>
                                        <i class="layui-icon layui-icon-error" lay-on="confirm"></i><br>
                                        <i class="layui-icon layui-icon-dialogue" onclick="showPrivate('小蓝')"></i><br>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-row friend-dating-list">
                <div class="layui-col-md9">
                    <ul class="layui-timeline">
                        <li class="layui-timeline-item friend-item">
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-row">
                                    <!-- 左边照片 -->
                                    <div class="layui-col-md4">
                                        <a href="javascript:void(0)" onclick="showUserInfo('小红','layui2_9/images/user03.jpg')">
                                            <img src="layui2_9/images/user03.jpg" alt="" class="layui-circle" style="width: 150px; height: auto;">
                                        </a>
                                    </div>
                                    <!-- 中间内容 -->
                                    <div class="layui-col-md7 info">
                                        <p><span>小红</span><span style="float: right">匹配度96%</span></p>
                                        <p><span>24岁 | 金牛座 | 男 | 南昌大学 | 软件工程师</span></p>
                                        <p><span>我是一个具有2年工作经验的Java软件工程师。</span></p>
                                    </div>
                                    <!-- 右边操作按钮 -->
                                    <div class="layui-col-md1 actions">
                                        <i class="layui-icon layui-icon-heart" onclick="follow(this)"></i><br>
                                        <i class="layui-icon layui-icon-error" lay-on="confirm"></i><br>
                                        <i class="layui-icon layui-icon-dialogue" onclick="showPrivate('小红')"></i><br>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--用户列表-->

        </div>

    </div>



    <div class="layui-footer" align="center">
        <!-- 底部固定区域 -->
        ©  - 校园即时服务平台
    </div>
</div>




<script src="./layui2_9/layui.js"></script>

<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
        // 监听侧边导航栏的点击事件
        element.on('nav(test)', function (elem) {
            var parentLi = elem.closest('li.layui-nav-item');
            var allNavItems = document.querySelectorAll('.layui-nav-tree.layui-nav li.layui-nav-item');
            // 遍历所有导航项
            allNavItems.forEach(function (item) {
                if (item!== parentLi) {
                    // 关闭其他导航项的子菜单
                    var childMenu = item.querySelector('dl.layui-nav-child');
                    if (childMenu) {
                        // 移除 layui-nav-itemed 类以关闭菜单
                        // item.classList.remove('layui-nav-itemed');
                    }
                }
            });
            // 切换当前点击的导航项的展开/关闭状态
           // parentLi.addClass("layui-nav-itemed")
        });
    });
</script>

<script>
    function getAuser(stuid) {
        //iframe层
        layer.open({
            type: 2,
            title: '该用户信息',
            shadeClose: true,
            shade: false,
            area: ['1000px', '600px'],
            content: 'userInfo.html'
        });
    }
</script>

<script>

    //加入黑名单
    layui.use(function(){
        var layer = layui.layer;
        var util = layui.util;
        // 批量事件
        util.on('lay-on', {
            confirm: function(){
                layer.confirm('你确认要加入黑名单吗？', {
                    btn: ['确定', '关闭'] //按钮
                }, function(){
                    layer.msg('加入黑名单成功', {icon: 1});
                }, function(){
                    //layer.msg('第二个回调', {
                    //    time: 20000, // 20s 后自动关闭
                    //    btn: ['明白了', '知道了']
                    //});
                });
            },
            msg: function(){
                layer.msg('一段提示信息');
            }
        });
    });
</script>

<script>
    layui.use([ 'form', 'laydate' ], function() {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate;

        //日期
        laydate.render({
            elem : '#date'
        });
        laydate.render({
            elem : '#date1'
        });

        //自定义验证规则
        form.verify({
            account : function(value) {
                if (value.length < 3) {
                    return '账号至少得3个字符啊';
                }
            }
        });

        //监听提交
        form.on('submit(reform)', function(data) {
            /*layer.alert(JSON.stringify(data.field), {
                title : '最终的提交信息'
            })*/
            //return false;
        });
    });

</script>
<script>

    //漂流瓶中点击头像弹出层显示用户信息
    function showUserInfo(username,path) {
        window.sessionStorage.setItem("username",username);
        window.sessionStorage.setItem("path",path);
        //iframe层
        layer.open({
            type: 2,
            title: '即时通信',
            shade: 0.6, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            area: ['1000px', '600px'],
            content: 'userInfo.html'
        });
    }

    //私聊
    function showPrivate(value) {
        window.sessionStorage.setItem("username",value);
        //iframe层
        layer.open({
            type: 2,
            title: '即时通信',
            shade: 0.6, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            area: ['1000px', '600px'],
            content: 'userTalk.html'
        });
    }

    //添加关注
    function follow(i) {
        var clazz = i.getAttribute("class");
        if(clazz == "layui-icon layui-icon-heart"){
            i.setAttribute("class","layui-icon layui-icon-heart-fill");
            layui.layer.msg("关注成功");
        }else{
            i.setAttribute("class","layui-icon layui-icon-heart");
            layui.layer.msg("取关成功");
        }
    }

</script>
<script>
    layui.use(function(){
        var dropdown = layui.dropdown;
        // 绑定输入框
        dropdown.render({
            elem: '#ID-dropdown-demo-base-input',
            closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
            data: [{
                title: '中南大学',
                id: 101
            },{
                title: '湖南大学',
                id: 102
            },{
                title: '长沙大学',
                id: 103
            }],
            click: function(obj){
                this.elem.val(obj.title);
            },
            style: 'min-width: 235px;'
        })
    });
</script>
</body>
</html>
